<template>
  <div class="user-info" :class="{ clickable: clickable }" @click="handleClick">
    <a-avatar 
      :src="user?.userAvatar" 
      :size="size"
      :style="{ flexShrink: 0 }"
    >
      {{ user?.userName?.charAt(0) || 'U' }}
    </a-avatar>
    <span v-if="showName" class="user-name">
      {{ user?.userName || '未知用户' }}
    </span>
  </div>
</template>

<script setup lang="ts">
interface Props {
  user?: any
  size?: number | 'small' | 'default' | 'large'
  showName?: boolean
  clickable?: boolean
}

interface Emits {
  (e: 'click', user: any): void
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  showName: true,
  clickable: false
})

const emit = defineEmits<Emits>()

const handleClick = () => {
  if (props.clickable) {
    emit('click', props.user)
  }
}
</script>

<style scoped>
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-info.clickable:hover {
  opacity: 0.8;
}

.user-name {
  font-size: 14px;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
</style>
